<template>
  <view class="withdrawal">
    <view class="withdrawal_top">
      <view class="wt_money">
        可提现佣金（元）
      </view>
      <view class="wt_explain">
        ￥99999.00
      </view>
    </view>
    <view class="withdrawal_content">
      <view class="wc_title">
        提现金额
      </view>
      <view class="wc_input t-ju-between">
        <view class="t-ali-center">
          <span class="text">￥</span>
          <input type="number" placeholder="请输入金额">
        </view>
        <span class="btn">全部提现</span>
      </view>
      <u-cell-group :border="false">
        <u-cell-item title="提现至" :value="type" @click="buystatusShow = true" :border-bottom="false"></u-cell-item>
      </u-cell-group>
      <view class="button">
        立即提现
      </view>
    </view>
    <u-select v-model="buystatusShow" mode="single-column" :list="buystatusList" @confirm="confirm"></u-select>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  const type = ref('微信')
  const buystatusShow = ref(false) // 业务类型下拉框弹窗开关
  const buystatusList = ref([{
      value: '1',
      label: '微信'
    },
    {
      value: '2',
      label: '支付宝'
    }
  ])
  const confirm = (val) => {
    console.log('下拉框的确定', val);
    type.value = val[0].label
    buystatusShow.value = false
  }
</script>

<style lang="scss" scoped>
  .withdrawal {
    .withdrawal_top {
      position: relative;
      top: 5rpx;
      width: 100%;
      height: 180rpx;
      background-color: #fff;

      .wt_money {
        position: absolute;
        top: 40rpx;
        left: 30rpx;
        font-size: 24rpx;
      }

      .wt_explain {
        position: absolute;
        top: 100rpx;
        left: 30rpx;
        font-size: 24rpx;
      }
    }

    .withdrawal_content {
      padding-bottom: 30rpx;
      position: relative;
      top: 20rpx;
      width: 100%;
      // height: 480rpx;
      background-color: #fff;

      .wc_title {
        padding: 30rpx;
        font-size: 24rpx;
      }

      .wc_input {
        margin: 30rpx;
        padding: 30rpx 0;
        font-size: 24rpx;
        border-bottom: 2rpx solid #AAAAAA;

        .text {
          margin-right: 15rpx;
        }
      }

      .button {
        margin: 40rpx auto;
        width: 90%;
        height: 80rpx;
        background-color: #555555;
        color: #fff;
        border-radius: 9rpx;
        text-align: center;
        line-height: 80rpx;
      }
    }
  }
</style>